<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/laydate/laydate.js"></script>
<style type="text/css">
 h2{
  margin-left: -3%;
 }
 .main{
  width:90%;
  margin-left:5%;
 }
 #addCar{
   float: right;
	margin-right: 15px;
 }
 .seach{
   margin-top:4px;
   margin-bottom:4px;
 }
</style>
</head>
<body>
	<div class="">
		<div class="main">
			<h2>用车管理</h2>
			<div id="main" class="">
				<ul id="myTab" class="nav nav-tabs">
					<li class="active">
					   <a href="#home" data-toggle="tab">申请管理</a>
					</li>
					<li>
					   <a href="#ios" data-toggle="tab">车辆管理</a>
					</li>

				</ul>
				<div id="myTabContent" class="tab-content">
					<div class="tab-pane fade in active" id="home">
					  <div class="seach">
					     车辆编号
					     <select id="ca_carno" name="ca_carno">	
					          <option value="">请选择</option>				
						      <option v-for="car in carManageList" value="{{car.cm_id}}">{{car.cm_style}}</option>			             
						   </select>
					      &nbsp;&nbsp;
					     时间段<input type="text" id="test5" name="starttime">-<input type="text" id="test6" name="starttime"> &nbsp;&nbsp;
					     <select id="ca_starte">
					        <option value="">请选择状态</option>
					        <option value="待审核">待审核</option>
					        <option value="审核通过">审核通过</option>
					        <option value="审核失败">审核失败</option>
					     </select>&nbsp;&nbsp;&nbsp;
					     <button type="button" class="btn btn-default btn-xs" id="seach2">搜索</button>
					  </div>
						<table class = "table table-bordered">
						    <tr>
						       <th>序列</th>
						       <th>申请人</th>
						       <th>车辆编号</th>
						       <th>申请的车</th>
						       <th>时间段</th>
						       <th>目的地</th>
						       <th>理由</th>
						       <th>状态</th>
						       <th>操作</th>
						    </tr>
						    <tr v-for="carApply in carApplyList">
						       <td>{{$index+1}}</td>
						       <td>{{carApply.uname}}</td>
						       <td name="cm_carno">{{carApply.cm_carno}}</td>
						       <td>{{carApply.cm_style}}</td>
						       <td name="time">{{carApply.starttime}}-{{carApply.stoptime}}</td>
						       <td>{{carApply.ca_destination}}</td>
						       <td>{{carApply.ca_cause}}</td>
						       <td>{{carApply.ca_starte}}</td>
						       <td>
						        <template v-if="carApply.ca_starte=='待审核'">
						         <button type="button" class="btn btn-default btn-xs update" v-bind:value=carApply.ca_id>审批</button>
						        </template>						        
						        
						       <button type="button" class="btn btn-default btn-xs delete" v-bind:value=user.uid>删除</button>
						       </td>
						    </tr>
						</table>
						<div id="layPage2"></div>
					</div>
					<div class="tab-pane fade" id="ios">
					  <div>
					    <table class="table table-bordered">
					       <tr>
					         <td colspan="7">车辆列表 <span class="glyphicon glyphicon-plus" id="addCar">新增车辆</span></td>
					       </tr>
					       <tr>
					         <th>序列</th>
					         <th>车辆编号</th>
					         <th>车牌号</th>
					         <th>车型</th>
					         <th>状态</th>
					         <th>备注</th>
					         <th>操作</th>			         
					       </tr>
					       <tr v-for="car in carList">
					         <td>{{$index+1}}</td>
					         <td name="caiManage_id">{{car.cm_carno}}</td>
					         <td >{{car.cm_cardid}}</td>
					         <td >{{car.cm_style}}</td>
					         <td name="carManage_status">{{car.cm_status}}</td>
					         <td name="carManage_remark">{{car.cm_remark}}</td>
					         <td>
					           <button type="button" class="btn btn-default btn-xs updateCarManage" v-bind:value=user.uid>修改</button>
					         </td>
					       </tr>
					    </table>
					    <div id="layPage"></div>
					  </div>
					</div>
				</div>
			</div>
			<!-- 模态框 -->
			
	<div class="modal fade" id="look-diary" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">新增日志</h4>
                </div>
                <div class="modal-body">
                    <form action="../addCarManage" method="post" id="addfrom">
                        <table class="table">
                            <tr>
                                <td>车辆编号</td>
                                <td><input type="text" name="cm_carno" id = "cm_carno"></td>
                            </tr>
                            <tr>
                                <td>车牌号</td>
                                <td><input type="text" name="cm_cardid" id="cm_cardid"></td>                               
                            </tr>
                            <tr>
                                <td>车型</td>
                                <td><input type="text" name="cm_style" id="cm_style"></td>                               
                            </tr>
                            <tr>
                                <td>备注</td>
                                <td>
                                <textarea rows="5" cols="40" name="cm_remark" id="cm_remark"></textarea>
                                </td>                               
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default submit" data-dismiss="modal">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
    <!-- 审核 -->
    <div class="modal fade" id="examination" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">审核</h4>
                </div>
                <div class="modal-body">
                    <form action="../addCarManage" method="post" id="addfrom">
                        <table class="table">
                            <tr>
                                <td>车辆编号</td>
                                <td id="carid"></td>
                            </tr>
                            <tr>
                                <td>开始时间</td>
                                <td id="starttime"></td>                               
                            </tr>
                            <tr>
                                <td>结束时间</td>
                                <td id = "endtime"></td>                               
                            </tr>
                            <tr>
                               <td>
                               <span id="inspect">检验是否被占用</span>
                              <!--  <button class="btn btn-default" type="button" id="inspect">检验是否被占用</button> -->
                               </td>
                               <td id="result6"></td>
                            </tr>                         
                        </table>
                        <input type="radio" name="my_sex" value="审核通过" checked="checked">同意
                        <input type="radio" name="my_sex" value="审核失败" >拒绝
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default " id="updateSubmit" data-dismiss="modal">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
    <div class="modal fade" id="updateCarManage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">修改车辆</h4>
                </div>
                <div class="modal-body">
                    <form action="../" method="post" id="addfrom">
                        <table class="table table-bordered">
                            <tr>
                                <td>车辆编号</td>
                                <td id="updateCarID"></td>
                            </tr>
                            <tr>
                                <td>状态</td>
                                <td id="">
                                  <select id="updateStatus">
                                    
                                  </select>
                                </td>                               
                            </tr>
                            <tr>
                                <td>备注</td>
                                <td id = "">
                                  <textarea rows="4" cols="35" id="updateText"></textarea>
                                </td>                               
                            </tr>                                                
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-default " id="updateManageSubmit" data-dismiss="modal">提交</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
			
		</div>
  </div>
  
 <script type="text/javascript">
  $(function(){
	  
	  $("#addCar").click(function(){
		  $("#look-diary").modal("show");
	  });
	  
	  $(".submit").click(function(){
		  var data = new FormData();
		  var cm_carno = $("#cm_carno").val();
		  var cm_cardid = $("#cm_cardid").val();
		  var cm_style = $("#cm_style").val();
		  var cm_remark = $("#cm_remark").val();
		  data.append("cm_carno",cm_carno);
		  data.append("cm_cardid",cm_cardid);
		  data.append("cm_style",cm_style);
		  data.append("cm_remark",cm_remark);
		  $.ajax({
			  url:'../addCarManage',
			  type:'post',
		      data:data,
			  processData: false,
			  contentType: false,
			  dataType:"JSON",
			  success : function(result){
				  console.log(result);
				  if(result==true){
					  alert("新增成功!!!");
				  }
			  }
		  })
	  });
	  
	  var currentPage=1;
	  var vue = new Vue({
		  el:"#ios",
		  data:{carList:""},
		  methods:{
			  getCarList:function(){
				  var _self = this;
				  $.ajax({
					  url:'../getCarManageList',
					  type:'post',				
					  data:{'currentPage':currentPage},
					  dataType:'json',
					  success:function(result){
						  console.log(result);
						  _self.carList = result.carList;
							laypage({
        						cont:$("#layPage"),//分页内容所有显示的容器位置 
        						pages:result.mixNums,//分页显示的总页数
        						curr:currentPage,//当前页
       						 skin:'molv',//皮肤
       						 skip:true,//支持跳页的功能
       						 last:'尾页',
       						 groups:result.limit, 
       						 jump:function(obj,first){//触发分页后的回调
       							 currentPage=obj.curr;
       							 if(!first){//一定要加此判断，否则初始时会无限刷新
       								vue.getCarList();//获取当前页
       							  }
        						 }
        					});
					  }
				  })
			  }
		  }
	  })
	  vue.getCarList();
	  
	  var current=1
	  //显示所有车辆申请
	  var vue2 = new Vue({
		  el:"#home",
		  data:{carApplyList:"",carManageList:""},
		  methods:{
			  getCarApplyList : function(){
				  var _self = this;
				  var ca_starte = $("#ca_starte").val();
				  var ca_carno = $("#ca_carno").val();
				  var starttime = $("#test5").val();
				  var stoptime = $("#test6").val();
				  console.log(starttime);
				  $.ajax({
					  url:'../getCarApplyManage',
					  type:'post',
					  data:{'ca_starte':ca_starte,'ca_carno':ca_carno,'starttime':starttime,'stoptime':stoptime,'currentPage':current},
					  dataType:'json',
					  success : function(result){
						  console.log(result);
						  _self.carApplyList = result.carApplyList;
							laypage({
        						cont:$("#layPage2"),//分页内容所有显示的容器位置 
        						pages:result.mixNums,//分页显示的总页数
        						curr:current,//当前页
       						 skin:'molv',//皮肤
       						 skip:true,//支持跳页的功能
       						 last:'尾页',
       						 groups:result.limit, 
       						 jump:function(obj,first){//触发分页后的回调
       							 current=obj.curr;
       							 if(!first){//一定要加此判断，否则初始时会无限刷新
       								vue2.getCarApplyList();//获取当前页
       							  }
        						 }
        					});
					  }
				  })
			  },
		     getCarManage:function(){
		    	 var _self = this;
		    	 $.ajax({
		    		 url:'../getCnameList',
		    		 type:'post',
		    		 dataType:'json',
		    		 success : function(result){
		    			 console.log(result);
		    			 _self.carManageList = result;
		    		 }
		    	 })
		     }
		     
		  }
	  })
	  vue2.getCarApplyList();
	  vue2.getCarManage();
	  
	  $("#seach2").click(function(){
		  current=1;
		  vue2.getCarApplyList();
	  })
	  
	  var wid;
	  $("#home").on('click','.update',function(){
		  wid = $(this).val();
		   var t1 = $(this).parent("td").parent("tr").children("td[name='cm_carno']").html();
		   var t2 = $(this).parent("td").parent("tr").children("td[name='time']").html();
		   var t3 = t2.substring(0,19);
		   var t4 = t2.substring(20);
		   console.log(t3);
		   console.log(t4)
		   $("#carid").html(t1);
		   $("#starttime").html(t3);
		   $("#endtime").html(t4);
		   $("#result6").html("");
		  $("#examination").modal("show");
	  })
	  
	  $("#inspect").click(function(){
		  var carid = $("#carid").html();
		  var starttime = $("#starttime").html();
		  var endtime = $("#endtime").html();
		  console.log(carid);
		  
		  $.ajax({
			  url:'../checkCarStatus',
			  type:'post',
			  data:{'ca_cause':carid,'starttime':starttime,'stoptime':endtime},			  
			  dataType:'text',
			  success : function(result){
				  if(result=='1'){
					  $("#result6").html("可以通过"); 
				  }else if(result=='2'){
					  $("#result6").html("被占用"); 
				  }else{
					  $("#result6").html("车辆维修中"); 
				  }				  
	    		 }
		  })
	  })
	  
	  $("#updateSubmit").click(function(){
		  var result = $('input[name="my_sex"]:checked ').val();
		  console.log(result);
		  console.log(wid);
		  $.ajax({
			  url:'../changeApplyStatue',
			  type:'post',
			  data:{'ca_id':wid,'starte':result},
			  dataType:'json',
			  success : function(result){
				  if(result){
					  alert("审批通过")
					  vue2.getCarApplyList();
				  }
			  }
		  })
	  })
	  
	  $("#ios").on('click','.updateCarManage',function(){
		  var q1 = $(this).parent("td").parent("tr").children("td[name='caiManage_id']").html();
		  var q2 = $(this).parent("td").parent("tr").children("td[name='carManage_status']").html();
		  var q3 = $(this).parent("td").parent("tr").children("td[name='carManage_remark']").html();
		  $("#updateCarManage").modal("show");
		  $("#updateCarID").html(q1);
		  $("#updateText").html(q3);
		  $("#updateStatus").html("");
		  if(q2=="正常"){
			  $("#updateStatus").append("<option value='正常' selected='selected'>正常</option>")
		  }else{
			  $("#updateStatus").append("<option value='正常' >正常</option>")
		  }
		  if(q2=="冻结"){
			  $("#updateStatus").append("<option value='冻结' selected='selected'>冻结</option>")
		  }else{
			  $("#updateStatus").append("<option value='冻结' >冻结</option>")
		  }
		  
	  })
	  
	  //修改提交表单
	  $("#updateManageSubmit").click(function(){
		 var carId = $("#updateCarID").html();
		 var states = $("#updateStatus").val();
		 var updateText = $("#updateText").val();
		 console.log(carId);
		 console.log(states);
		 console.log(updateText);
		 $.ajax({
			 url:"../changeCarManage",
			 post:'post',
			 data:{'cm_carno':carId,'cm_status':states,'cm_remark':updateText},
			 dataType:'json',
			 success : function(result){
				 if(result){
					 vue.getCarList(); 
				 }
			 }
		 })
	  });
	  
	  
  })
  
   laydate.render({
  elem: '#test6'
  ,type: 'datetime'
});
     laydate.render({
    	  elem: '#test5'
    	  ,type: 'datetime'
    	});
 </script>
</body>
</html>